<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    
    <title>弹出框效果测试</title>
    
    <link rel="stylesheet" href="test.css">
    
    <!-- include alertify.css -->
    <link rel="stylesheet" href="alertifyjs/css/alertify.css">
    <link rel="stylesheet" href="../../assets/js/sweetalert/sweetalert.css">
    
    
    
    <!-- include boostrap theme  -->
    <link rel="stylesheet" type="text/css" href="alertifyjs/css/themes/bootstrap.css">
    
    <!-- include alertify script -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script src="alertifyjs/alertify.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../assets/js/sweetalert/sweetalert.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    //override defaults
    // alertify.defaults.transition = "slide";
    // alertify.defaults.theme.ok = "btn btn-primary";
    // alertify.defaults.theme.cancel = "btn btn-danger";
    // alertify.defaults.theme.input = "form-control";
    </script>
</head>

	
<body>

<a id="run_1" class="button" href="javascript:void(0);">
    <span> Run 1 </span>
</a>


<a id="run_2" class="button" href="javascript:void(0);">
    <span> Run 2 </span>
</a>


<a id="run_3" class="button" href="javascript:void(0);">
    <span> Run 3 </span>
</a>


<a id="run_4" class="button" href="javascript:void(0);">
    <span> Run 4 </span>
</a>

<a id="run_5" class="button" href="javascript:void(0);">
    <span> Run 5 </span>
</a>


<a href="javascript:void(0);" class="button" id="run_6"><span class="button-text">Run 6</span></a>
<a href="javascript:void(0);" class="button" id="run_7"><span class="button-text">Run 7</span></a>
<a href="javascript:void(0);" class="button" id="run_8"><span class="button-text">Run 8</span></a>
<a href="javascript:void(0);" class="button" id="run_9"><span class="button-text">Run 9</span></a>
<a href="javascript:void(0);" class="button" id="run_10"><span class="button-text">Run 10</span></a>
<a href="javascript:void(0);" class="button" id="run_11"><span class="button-text">Run 11</span></a>
<a href="javascript:void(0);" class="button" id="run_12"><span class="button-text">Run 12</span></a>
<a href="javascript:void(0);" class="button" id="run_13"><span class="button-text">Run 13</span></a>
<a href="javascript:void(0);" class="button" id="run_14"><span class="button-text">Run 14</span></a>
<a href="javascript:void(0);" class="button" id="run_15"><span class="button-text">Run 15</span></a>




<script type="text/javascript" charset="utf-8" async defer>

// if(!alertify.myAlert){
//   //define a new dialog
//   alertify.dialog('myAlert',function(){
//     return{
//       main:function(message){
//         this.message = message;
//       },
//       setup:function(){
//           return { 
//             buttons:[{text: "cool!", key:27/*Esc*/}],
//             focus: { element:0 }
//           };
//       },
//       prepare:function(){
//         this.setContent(this.message);
//       }
//   }});
// }
//launch it.
// alertify.myAlert("Browser dialogs made easy!");


$("#run_1").click(function() {
    alertify
        .alert("This is an alert dialog.")
        .set('true', false)
        .set('frameless', true)
        // .set({'closableByDimmer': true})
        ; 
});

$("#run_2").click(function() {
    alertify.message('OK');
    
});

$("#run_3").click(function() {
	alertify.success('Success message');
});

$("#run_4").click(function() {
	alertify.error('Error message');
});

$("#run_5").click(function() {
	alertify.error('Error message');
});

$("#run_6").click(function() {
	alertify.warning('Warning message');
});

$("#run_7").click(function() {
	 alertify.dialog('alert').set({transition:'flipx',message: 'Transition effect: flipx'}).show(); 
});

$("#run_8").click(function() {
	alertify.alert('Hello World!')
	.setHeader('<span style="color:red"> HTML Header </span> ')
	.setContent('<h1> Hello World! </h1>')
	; 
});

$("#run_9").click(function() {
 swal({ title: "很遗憾", text: "Here's my error message!", type: "error", confirmButtonText: "Cool" });
});


$("#run_10").click(function() {
	swal({ title: "很遗憾", text: "Here's my error message!", type: "info", confirmButtonText: "Cool" });
});


$("#run_11").click(function() {
	swal({ 
		title: "很遗憾", 
		text: "Here's my error message!", 
		type: "success",
		allowOutsideClick: true,
		showPreloader:false,

		confirmButtonText: "Cool" 
	});

});


$("#run_12").click(function() {
	
});


$("#run_13").click(function() {
	
});



</script>



</body>

</html>
